// window.addEventListener('load', function () {
//     // 1.获取元素
//     var focus = document.querySelector('.focus')
//     var arrow_l = document.querySelector('.arrow-l')
//     var arrow_r = document.querySelector('.arrow-r')
//     var foucsWidth = focus.offsetWidth
//     // 2.鼠标经过就显示隐藏按钮
//     focus.addEventListener('mouseenter', function () {
//         arrow_l.style.display = 'block'
//         arrow_r.style.display = 'block'
//         clearInterval(timer)
//         // 定时器清除不用后 最后把变量清空
//         timer = null
//     })
//     focus.addEventListener('mouseleave', function () {
//         arrow_l.style.display = 'none'
//         arrow_r.style.display = 'none'
//         // 鼠标离开开启定时器
//         timer = setInterval(function () {
//             arrow_r.click()
//         }, 2000)

//     })
//     // 3.根据焦点图动态生成对应数量圆圈
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('.circle')
//     for (var i = 0; i < ul.children.length; i++) {
//         var li = document.createElement('li')
//         // 记录当前圆圈的索引号 通过自定义属性来做
//         li.setAttribute('index', i)
//         ol.appendChild(li)

//         // 4.在生成圆圈li时同时给他绑定点击事件
//         // 生成一个li标签就会添加一个事件 等价于了所有的圆圈li绑定了点击事件
//         li.addEventListener('click', function () {
//             for (var i = 0; i < ol.children.length; i++) {
//                 // 因为并没有获取li元素 所以只能用children[i]替代所有的li
//                 ol.children[i].className = ''
//             }
//             this.className = 'current'
//             // 5.点击小圆圈 移动图片 移动的是ul 计算公式：当前圆圈索引号乘以图片的宽度 （索引号需自定义）
//             // 获取图片的宽度 在上面全局都可以用

//             // 拿到当前圆圈的索引号 然后计算图片移动的距离 公式：当前圆圈索引号*图片的宽度 
//             var index = this.getAttribute('index')

//             // 9.当我们点击某个li就把当前这个li的索引号给 num 和circle 这样顺序就不会乱了
//             num = circle = index

//             // 注意 移动的距离是负值
//             animate(ul, -index * foucsWidth)
//         })
//     }
//     ol.children[0].className = 'current'
//     // 6.无缝联播：深克隆第一张图片li放到ul最后面
//     var first = ul.children[0].cloneNode(true)
//     ul.appendChild(first)
//     // 7.每点击右侧按钮 图片就滚动一张 利用变量自加 然后用图片移动距离的公式：自定义变量索引 * 图片宽度 
//     var num = 0
//     var circle = 0
//     arrow_r.addEventListener('click', function () {
//         //  如果走到最后一个右侧按钮图片（克隆的第一张焦点图）后不做动画 直接回到left0的位置 无缝联播原理
//         if (num == ul.children.length - 1) {
//             ul.style.left = 0
//             num = 0
//         }
//         num++


//         // 如果走到最后一个圆圈 就复原到第一个圆圈
//         circle++
//         if (circle == ol.children.length) {
//             circle = 0
//         }

//         // 公式：当前圆圈索引号乘以图片的宽度
//         animate(ul, -num * foucsWidth)
//         // 8.调用圆圈颜色排他函数 
//         circleChange()
//     })

//     // 10.左侧按钮
//     arrow_l.addEventListener('click', function () {
//         //  往左侧点击时按到第一张焦点图时 在点击就无缝联播到最后一张图 注意单位为负数
//         if (num == 0) {
//             num = ul.children.length - 1
//             ul.style.left = -num * foucsWidth + 'px'
//         }
//         num--
//         animate(ul, -num * foucsWidth)
//         circle--
//         // 圆圈没有克隆的哪一张焦点图 所以小于0时在切换到最后一张图
//         // if (circle < 0) {
//         //     circle = ol.children.length - 1
//         // }
//         circle = circle < 0 ? circle = ol.children.length - 1 : circle
//         circleChange()
//     })

//     // 圆圈颜色排他函数
//     function circleChange() {
//         for (var i = 0; i < ol.children.length; i++) {
//             ol.children[i].className = ''
//         }
//         ol.children[circle].className = 'current'
//     }
//     // 11.自动播放 利用定时器调用点击事件
//     var timer = setInterval(function () {
//         arrow_r.click()
//     }, 2000)


// })






















// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var arrow_l = focus.querySelector('.arrow-l')
//     var arrow_r = focus.querySelector('.arrow-r')
//     var focusWidth = focus.offsetWidth
//     focus.addEventListener('mouseenter', function () {
//         arrow_l.style.display = 'block'
//         arrow_r.style.display = 'block'
//         clearInterval(timer)
//         timer = null
//     })

//     focus.addEventListener('mouseleave', function () {
//         arrow_l.style.display = 'none'
//         arrow_r.style.display = 'none'
//         timer = setInterval(function () {
//             //    调用绑定事件
//             arrow_r.click()
//         }, 2000)
//     })

//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('.circle')
//     for (var i = 0; i < ul.children.length; i++) {
//         var li = document.createElement('li')
//         li.setAttribute('index', i)
//         ol.appendChild(li)
//         li.addEventListener('click', function () {
//             for (var i = 0; i < ol.children.length; i++) {
//                 ol.children[i].className = ''
//             }
//             this.className = 'current'
//             var index = this.getAttribute('index')
//             animate(ul, -index * focusWidth)
//             num = circle = index
//         })
//     }

//     ol.children[0].className = 'current'
//     var first = ul.children[0].cloneNode(true)
//     ul.appendChild(first)
//     var num = 0
//     var circle = 0
//     arrow_r.addEventListener('click', function () {
//         if (num == ul.children.length - 1) {
//             ul.style.left = 0 + 'px'
//             num = 0
//         }
//         num++
//         animate(ul, -num * focusWidth)
//         circle++
//         circle == ol.children.length ? circle = 0 : circle
//         circleChange()

//     })

//     arrow_l.addEventListener('click', function () {
//         if (num == 0) {
//             num = (ul.children.length - 1)
//             ul.style.left = -num * focusWidth + 'px'
//         }
//         num--
//         animate(ul, -num * focusWidth)
//         circle--
//         circle = circle < 0 ? circle = ol.children.length - 1 : circle
//         circleChange()
//     })

//     function circleChange() {
//         for (var i = 0; i < ol.children.length; i++) {
//             ol.children[i].className = ''
//         }
//         ol.children[circle].className = 'current'
//     }
//     var timer = setInterval(function () {
//         //    调用绑定事件
//         arrow_r.click()
//     }, 2000)

// })





// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var arrow_l = focus.querySelector('.arrow-l')
//     var arrow_r = focus.querySelector('.arrow-r')
//     var focusWidth = focus.offsetWidth
//     focus.addEventListener('mouseenter', function () {
//         arrow_l.style.display = 'block'
//         arrow_r.style.display = 'block'
//         clearInterval(timer)
//         timer = null
//     })
//     focus.addEventListener('mouseleave', function () {
//         arrow_l.style.display = 'none'
//         arrow_r.style.display = 'none'
//         timer = setInterval(function () {
//             arrow_r.click()
//         }, 2000)
//     })
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('ol')
//     for (var i = 0; i < ul.children.length; i++) {
//         var li = document.createElement('li')
//         li.setAttribute('index', i)
//         ol.appendChild(li)

//         li.addEventListener('click', function () {
//             for (var i = 0; i < ol.children.length; i++) {
//                 ol.children[i].className = ''
//             }
//             this.className = 'current'
//             var index = this.getAttribute('index')
//             num = circle = index
//             animate(ul, - index * focusWidth)
//         })
//     }
//     ol.children[0].className = 'current'
//     var first = ul.children[0].cloneNode(true)
//     ul.appendChild(first)
//     var num = 0
//     var circle = 0
//     var flag = true
//     arrow_r.addEventListener('click', function () {

//         if (flag) {
//             flag = false
//             if (num == ul.children.length - 1) {
//                 ul.style.left = 0 + 'px'
//                 num = 0
//             }
//             num++
//             circle++
//             if (circle == ol.children.length) {
//                 circle = 0
//             }
//             animate(ul, -num * focusWidth, function () {
//                 flag = true
//             })
//             circleChange()
//         }

//     })
//     arrow_l.addEventListener('click', function () {
//         if (flag) {
//             flag = false
//             if (num == 0) {
//                 num = ul.children.length - 1
//                 ul.style.left = -num * focusWidth + 'px'
//             }
//             num--
//             circle--
//             if (circle < 0) {
//                 circle = ol.children.length - 1
//             }

//             animate(ul, -num * focusWidth, function () {
//                 flag = true
//             })
//             circleChange()
//         }
//     })
//     function circleChange() {
//         for (var i = 0; i < ol.children.length; i++) {
//             ol.children[i].className = ''
//         }
//         ol.children[circle].className = 'current'
//     }

//     var timer = setInterval(function () {
//         arrow_r.click()
//     }, 2000)
// })






// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('ol')
//     var arrow_l = focus.querySelector('.arrow-l')
//     var arrow_r = focus.querySelector('.arrow-r')
//     var focusWidth = focus.offsetWidth
//     focus.addEventListener('mouseenter', function () {
//         arrow_r.style.display = 'block'
//         arrow_l.style.display = 'block'
//         clearInterval(timer)
//         timer = null
//     })
//     focus.addEventListener('mouseleave', function () {
//         arrow_r.style.display = 'none'
//         arrow_l.style.display = 'none'
//         timer = setInterval(function () {
//             arrow_r.click()
//         }, 2000)

//     })
//     for (var i = 0; i < ul.children.length; i++) {
//         var li = document.createElement('li')
//         li.setAttribute('index', i)
//         ol.appendChild(li)
//         ol.children[0].className = 'current'
//         li.addEventListener('click', function () {
//             var index = this.getAttribute('index')
//             att.num = att.circle = index
//             animate(ul, -index * focusWidth)
//             for (var i = 0; i < ol.children.length; i++) {
//                 ol.children[i].className = ''
//             }
//             this.className = 'current'
//         })
//     }
//     var first = ul.children[0].cloneNode(true)
//     ul.appendChild(first)
//     var att = {
//         num: 0,
//         circle: 0,
//         flag: true
//     }
//     arrow_r.addEventListener('click', function () {
//         if (att.flag) {
//             att.flag = false
//             if (att.num == ul.children.length - 1) {
//                 ul.style.left = 0 + 'px'
//                 att.num = 0
//             }

//             att.num++
//             att.circle++
//             if (att.circle == ol.children.length) {
//                 att.circle = 0

//             }
//             animate(ul, -att.num * focusWidth, function () {
//                 att.flag = true
//             })
//             circleChange()
//         }

//     })
//     arrow_l.addEventListener('click', function () {
//         if (att.flag) {
//             att.flag = false
//             if (att.num == 0) {
//                 att.num = ul.children.length - 1
//                 ul.style.left = -att.num * focusWidth + 'px'

//             }

//             att.num--
//             att.circle--
//             if (att.circle < 0) {
//                 att.circle = ol.children.length - 1

//             }
//             animate(ul, -att.num * focusWidth, function () {
//                 att.flag = true
//             })
//             circleChange()
//         }
//     })


//     function circleChange() {
//         for (var i = 0; i < ol.children.length; i++) {
//             ol.children[i].className = ''
//         }
//         ol.children[att.circle].className = 'current'
//     }
//     var timer = setInterval(function () {
//         arrow_r.click()
//     }, 2000)


// })


// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('ol')
//     var arrow_r = document.querySelector('.arrow-r')
//     var arrow_l = document.querySelector('.arrow-l')
//     var focusWidth = focus.offsetWidth
//     focus.addEventListener('mouseenter', function () {
//         arrow_r.style.display = 'block'
//         arrow_l.style.display = 'block'
//         clearInterval(timer)
//         timer = null
//     })
//     focus.addEventListener('mouseleave', function () {
//         arrow_r.style.display = 'none'
//         arrow_l.style.display = 'none'
//         timer = setInterval(function () {
//             arrow_r.click()
//         }, 2000)
//     })
//     for (var i = 0; i < ul.children.length; i++) {
//         var li = document.createElement('li')
//         li.setAttribute('index', i)
//         ol.appendChild(li)

//         li.addEventListener('click', function () {
//             for (var i = 0; i < ol.children.length; i++) {
//                 ol.children[i].className = ''
//             }
//             this.className = 'current'
//             var index = this.getAttribute('index')
//             num = circle = index
//             animate(ul, - index * focusWidth)
//         })
//     }
//     ol.children[0].className = 'current'
//     var first = ul.children[0].cloneNode(true)
//     ul.appendChild(first)
//     var num = 0
//     var circle = 0
//     var flag = true
//     arrow_r.addEventListener('click', function () {
//         if (flag) {
//             flag = false
//             if (num == ul.children.length - 1) {
//                 ul.style.left = 0 + 'px'
//                 num = 0
//             }
//             num++
//             animate(ul, -num * focusWidth, function () {
//                 flag = true
//             })
//             circle++
//             if (circle == ol.children.length) {
//                 circle = 0
//             }
//             circleChange()
//         }
//     })
//     arrow_l.addEventListener('click', function () {
//         if (flag) {
//             flag = false
//             if (num == 0) {
//                 num = ul.children.length - 1
//                 ul.style.left = -num * focusWidth + 'px'
//             }
//             num--
//             animate(ul, -num * focusWidth, function () {
//                 flag = true
//             })
//             circle--
//             if (circle < 0) {
//                 circle = ol.children.length - 1
//             }
//             circleChange()
//         }

//     })
//     function circleChange() {
//         for (var i = 0; i < ol.children.length; i++) {
//             ol.children[i].className = ''

//         }
//         ol.children[circle].className = 'current'
//     }
//     var timer = setInterval(function () {
//         arrow_r.click()
//     }, 2000)


// })

// window.addEventListener('load', function () {
//     var focus = document.querySelector('.focus')
//     var ul = focus.querySelector('ul')
//     var ol = focus.querySelector('ol')
//     var focusWidth = focus.offsetWidth
//     var arrow_l = focus.querySelector('.arrow-l')
//     var arrow_r = focus.querySelector('.arrow-r')
//     focus.addEventListener('mouseenter', function () {
//         arrow_l.style.display = 'block'
//         arrow_r.style.display = 'block'
//         clearInterval(timer)
//         timer = null
//     })
//     focus.addEventListener('mouseleave', function () {
//         arrow_l.style.display = 'none'
//         arrow_r.style.display = 'none'
//         timer = setInterval(function () {
//             arrow_r.click()
//         }, 2000)
//     })
//     // var index = 0
//     for (var i = 0; i < ul.children.length; i++) {
//         var li = document.createElement('li')
//         li.setAttribute('index', i)
//         ol.appendChild(li)
//         ol.children[0].className = 'current'
//         li.addEventListener('click', function () {
//             var index = this.getAttribute('index')
//             num = circle = index
//             animate(ul, -index * focusWidth)
//             ol.querySelector('.current').classList.remove('current')
//             ol.children[index].classList.add('current')
//         })
//     }
//     var fisrt = ul.children[0].cloneNode(true)
//     ul.appendChild(fisrt)
//     var num = 0
//     var circle = 0
//     var flag = true
//     arrow_r.addEventListener('click', function () {
//         if (flag) {
//             flag = false
//             if (num == ul.children.length - 1) {
//                 ul.style.left = 0 + 'px'
//                 num = 0

//             }
//             num++
//             circle++
//             animate(ul, - num * focusWidth, function () {
//                 flag = true
//             })
//             if (circle == ol.children.length) {
//                 circle = 0
//             }
//             ol.querySelector('.current').classList.remove('current')
//             ol.children[circle].classList.add('current')

//         }
//     })
//     arrow_l.addEventListener('click', function () {
//         if (flag) {
//             flag = false
//             if (num == 0) {
//                 num = ul.children.length - 1
//                 ul.style.left = -num * focusWidth + 'px'
//             }
//             num--
//             circle--
//             animate(ul, - num * focusWidth, function () {
//                 flag = true
//             })
//             if (circle < 0) {
//                 circle = ol.children.length - 1
//             }
//             ol.querySelector('.current').classList.remove('current')
//             ol.children[circle].classList.add('current')
//         }
//     })
//     var timer = setInterval(function () {
//         arrow_r.click()
//     }, 2000)
// })
